{extend name="layout/app" /}

@section('title', '注册')
{block name="title"}注册{/block}

{block name="css"}
<style>

</style>
{/block}

{block name="content"}
<div class="container">
    <div class="row pt-4">
        <div class="card col-lg-4 offset-4 mb-3 mt-5">
            <div class="card-body">
                <div class="text-center">
                    <a href="{:url('/login')}" class="fs-20 font-weight-bold text-dark">登录</a>
                    <span>.</span>
                    <a href="{:url('/register')}" class="fs-20 font-weight-bold text-blue">注册</a>
                </div>
                <hr>
                <div id="div-msg" hidden>
                </div>
                <form id="form-register" method="POST" action="{:url('/register')}">
                    <meta name="csrf-token" id="__token__" content="{:token()}">
                    <div class="form-group">
                        <label for="exampleInputName" class="fs-14 font-weight-bold">用户名</label>
                        <input type="text" name="name" placeholder="请填写用户名" class="form-control form-control-sm" id="exampleInputName" aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail" class="fs-14 font-weight-bold">邮箱</label>
                        <input type="email" name="email" placeholder="请填写邮箱" class="form-control form-control-sm" id="exampleInputEmail" aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1" class="fs-14 font-weight-bold">密码</label>
                        <input type="password" name="exampleInputPassword1" placeholder="请填写密码" class="form-control form-control-sm" id="exampleInputPassword1">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword2" class="fs-14 font-weight-bold">重复密码</label>
                        <input type="password" name="exampleInputPassword2" placeholder="请填写确认密码" class="form-control form-control-sm" id="exampleInputPassword2">
                    </div>
                    <button id="btn-register" type="button" class="btn btn-primary btn-sm w-100 mt-4 bg-blue text-white">注册</button>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    $(function () {
        // 显示错误提示
        $('#btn-register').click(function () {
            var form = $('#form-register');
            $.ajax({
                url: form.attr('action'),
                type: 'post',
                data: form.serialize(),
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    if (res.code == 200){
                        notify('success', res.msg)
                        setTimeout(function (){
                            window.location.reload();
                        }, 1000);
                    } else {
                        $('#div-msg').removeAttr('hidden')
                        $('#div-msg').addClass('alert alert-danger')
                        $('#div-msg').html(`${ res.msg }`);
                        getNewToken();
                    }
                }
            })
        })

    })
</script>
{/block}
